<template>
  <el-container style="height: 100%">
    <el-aside width="240px">
      <el-scrollbar>
        <el-row>
          <el-col :span="16">
            <el-icon> <message /> </el-icon>RSS boot
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="small" @click="addFollow"
              >新增</el-button
            >
          </el-col>
        </el-row>
        <el-menu :default-openeds="['1-1']">
          <el-menu-item index="1-1" @click="readRssOne('all')"
            >全部订阅</el-menu-item
          >
          <el-menu-item
            v-for="(item, index) in followList"
            :index="index"
            @click="readRssOne(item)"
          >
            <span class="titleSpan" :title="item.remark">{{
              item.remark
            }}</span>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-main>
        <el-scrollbar>
          <RssMain
            :rssMain="rssMain"
            :follow="follow"
            @submitChange="queryFollow"
            v-if="follow !== 'all'"
          ></RssMain>

          <el-divider />
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>订阅信息</span>
                <el-button class="button mgl-21" type="primary" @click="searchBlog">搜索</el-button>
                <el-input
                  class="mgl-20"
                  placeholder="输入关键词搜索"
                  v-model="search"
                  :prefix-icon="Search"
                />
              </div>
            </template>

            <el-table :data="tableDataPage" title="dddd">
              <el-table-column prop="title" label="标题" />
              <el-table-column prop="publishTimeStr" label="更新时间" />
              <el-table-column prop="viewed" label="状态" width="120" />
              <!-- <el-table-column prop="categories" label="分类" /> -->
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :page-size="pageSize"
              :current-page="currentPage"
              background
              layout="prev, pager, next"
              :total="tableData.length"
              @current-change="hanlePageChange"
            />
          </el-card>
        </el-scrollbar>
      </el-main>
    </el-container>
    <AddFollow ref="addFollow"></AddFollow>
  </el-container>
</template>

<script>
import { $tip } from "@/base/util/ui";
import {
  readRssOne,
  queryFollow,
  addFetch,
  readHis,
  updateRss,
  delFollow,
} from "@/common/api/rss";
import RssMain from "./component/RssMain.vue";
import AddFollow from "./component/AddFollow.vue";

export default {
  data() {
    return {
      count: 0,
      tableData: [],
      tableDataPage: [],
      rssMain: {},
      followList: [],
      follow: {},
      currentPage: 1,
      pageSize: 7,
      search:''
    };
  },
  components: {
    RssMain,
    AddFollow,
  },
  computed: {
    tableDataPage() {
      const data = this.tableData;
      const page = this.currentPage;
      const pageSize = this.pageSize;
      let tableDataPage = [];
      if (data.length > 0) {
        let end = pageSize * page;
        let start = end - pageSize;
        tableDataPage = data.slice(start, end);
      }
      console.log(`tableDataPage`, tableDataPage);
      return tableDataPage;
    },
  },
  watch: {
    tableData() {
      this.currentPage = 1;
    },
  },
  methods: {
    queryFollow() {
      console.log(`233`, 233);
      queryFollow({}).then((res) => {
        this.followList = res;
      });
    },
    readRssOne(follow) {
      this.follow = follow;
      let param = { rssId: "" };
      if (follow === "all") {
        this.loadData(param)
      } else {
        this.rssMain = {
          link: follow.blogLink,
          title: follow.remark,
          rssId: follow.rssId,
        };
        param = { rssId: follow.rssId };
        this.loadData(param)
      }
    },
    handleClick(obj) {
      // 更新状态为已阅读
      obj.viewed = "已读";
      // 数据库更新为已读
      updateRss({
        uuid: obj.uuid,
        viewed: "1",
      });
      window.open(obj.link);
    },
    addFollow() {
      this.$refs.addFollow.addFollowInit();
    },
    refreshAllFollow() {
      console.log(`244444444`, 244444444);
    },
    hanlePageChange(num) {
      this.currentPage = num;
    },
    searchBlog(){
      const param = {title:'%'+this.search+'%' };
      if(this.follow && this.follow.rssId){
        param.rssId = this.follow.rssId
      }
      this.loadData(param)
    },
    loadData(param){
      readHis(param).then((res) => {
          res.forEach((item) => {
            if (item.viewed === "0") {
              item.viewed = "未读";
            } else {
              item.viewed = "已读";
            }
          });
          this.tableData = res;
        });
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.queryFollow();
    this.readRssOne("all");
  },
};
</script>

<style scoped>
.titleSpan {
  display: block;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mgl-20{
  float: right;
  width: 300px;
}

.mgl-21{
  float: right;
  width: 150px;
  margin-left: 10px;
}
</style>
